<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CourseCard from './components/CourseCard.vue'
import { getCourseList } from '@/services/home.ts'
// 导入会员Store
import { useMemberStore } from '@/stores'
import type { CourseItem, CourseParams } from '@/types/course'
// 获取会员Store实例
const memberStore = useMemberStore()

const courseList = ref<CourseItem[]>([])
// 分页参数
const coursePage = ref<CourseParams>({ pageNum: 1, pageSize: 10 })

const hasMoreCourses = ref(true)
// 是否加载中标记
const isLoading = ref(false)

// 加载数据
const loadData = async () => {
  isLoading.value = true
  await getCourseListData(coursePage.value) // 重置为第一页
  isLoading.value = false
}

// 获取课程列表
const getCourseListData = async (pageParams: CourseParams) => {
  pageParams.studentId = memberStore.profile?.userId
  // 如果是下拉刷新，清空现有数据
  if (pageParams.pageNum === 1) {
    courseList.value = []
    hasMoreCourses.value = true
  }

  // 如果没有更多数据，直接返回
  if (!hasMoreCourses.value) {
    return
  }

  try {
    const res = await getCourseList(pageParams)
    // 添加数据
    if (pageParams.pageNum === 1) {
      courseList.value = res.data.rows
    } else {
      courseList.value = [...courseList.value, ...res.data.rows]
    }
    // 判断是否还有更多数据
    hasMoreCourses.value = res.data.rows.length === pageParams.pageSize
    // 更新页码
    coursePage.value.pageNum = pageParams.pageNum
  } catch (error) {
    console.error('获取课程列表失败:', error)
  }
}
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  coursePage.value.pageNum = 1
  coursePage.value.pageSize = 10
  await getCourseListData(coursePage.value)
  isTriggered.value = false
}
// 上拉加载更多
const handleLoadMore = () => {
  if (hasMoreCourses.value) {
    coursePage.value.pageNum = (coursePage.value.pageNum ?? 1) + 1
    getCourseListData(coursePage.value)
  }
}

// 页面加载时执行
onMounted(async () => {
  // 首次加载数据
  await loadData()
})
</script>

<template>
  <!-- 滚动容器 -->
  <scroll-view
    :enable-back-to-top="true"
    :refresher-enabled="true"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="handleLoadMore"
    class="message-list"
    :scroll-y="true"
  >
    <CourseCard v-for="course in courseList" :key="course.id" :course="course" />
    <!-- 空状态显示 -->
    <view class="empty-state" v-if="courseList.length === 0 && !isLoading">
      <text class="empty-text">暂无相关数据</text>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: $bg-color;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 28rpx;
    color: $text-tertiary;
  }
}

/* 消息列表样式 */
.message-list {
  padding-top: 0;
  height: calc(100vh - 88rpx);
  background-color: $bg-color;
  padding-bottom: 30rpx;
}
</style>
